<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const videoId = route.params.id

// 图片加载错误处理函数
const handleImageError = (event) => {
  // 设置默认备用图片
  event.target.src = 'https://via.placeholder.com/130x85?text=Movie+Thumbnail';
  // 添加错误状态样式
  event.target.classList.add('image-error');
}

// 视频数据库 - 包含多个电影的详细信息
const videoDatabase = {
  '1': {
    id: '1',
    title: '电影标题：星际穿越',
    description: '在不远的未来，地球资源枯竭，人类面临生存危机。一组宇航员通过虫洞进行星际旅行，寻找人类新家园。在探索过程中，他们必须面对时间相对论的影响和未知的宇宙危险。',
    videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
    cover: 'https://placehold.co/1280x720?text=星际穿越',
    director: '克里斯托弗·诺兰',
    actors: ['马修·麦康纳', '安妮·海瑟薇', '杰西卡·查斯坦'],
    rating: '9.3',
    releaseDate: '2014-11-07',
    duration: '169分钟',
    views: '1580000',
    likes: '128000',
    tags: ['科幻', '冒险', '剧情']
  },
  '2': {
    id: '2',
    title: '电影标题：肖申克的救赎',
    description: '银行家安迪因被误判谋杀罪而入狱。在肖申克监狱中，他结识了瑞德，并在狱中度过了长达19年的时光。安迪凭借自己的智慧和坚韧，最终实现了令人震撼的救赎。',
    videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
    cover: 'https://placehold.co/1280x720?text=肖申克的救赎',
    director: '弗兰克·德拉邦特',
    actors: ['蒂姆·罗宾斯', '摩根·弗里曼', '鲍勃·冈顿'],
    rating: '9.7',
    releaseDate: '1994-09-23',
    duration: '142分钟',
    views: '2890000',
    likes: '210000',
    tags: ['剧情', '犯罪', '希望']
  },
  '3': {
    id: '3',
    title: '电影标题：盗梦空间',
    description: '多姆·科布是一名盗梦者，能够进入他人梦境窃取商业机密。他接受了一项看似不可能的任务：植入想法。在复杂的梦境层级中，现实与梦境的界限变得模糊不清。',
    videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
    cover: 'https://placehold.co/1280x720?text=盗梦空间',
    director: '克里斯托弗·诺兰',
    actors: ['莱昂纳多·迪卡普里奥', '约瑟夫·高登-莱维特', '艾伦·佩姬'],
    rating: '9.1',
    releaseDate: '2010-07-16',
    duration: '148分钟',
    views: '2340000',
    likes: '186000',
    tags: ['科幻', '悬疑', '动作']
  },
  '4': {
    id: '4',
    title: '电影标题：阿甘正传',
    description: '智商只有75的阿甘，通过自己的坚持和善良，参与并见证了美国历史上的许多重要事件。他对珍妮的爱情贯穿始终，展现了一个普通人如何创造不平凡人生的故事。',
    videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
    cover: 'https://placehold.co/1280x720?text=阿甘正传',
    director: '罗伯特·泽米吉斯',
    actors: ['汤姆·汉克斯', '罗宾·怀特', '加里·西尼斯'],
    rating: '9.4',
    releaseDate: '1994-07-06',
    duration: '142分钟',
    views: '2670000',
    likes: '198000',
    tags: ['剧情', '爱情', '励志']
  }
}

// 评论数据库 - 为每个视频提供不同的评论
const commentsDatabase = {
  '1': [
    {
      id: 1,
      user: {
        name: '科幻迷',
        avatar: 'https://placehold.co/100x100?text=用户'
      },
      content: '诺兰的时间概念太惊艳了，黑洞场景令人震撼！',
      time: '1小时前',
      likes: 567
    },
    {
      id: 2,
      user: {
        name: '星际探索者',
        avatar: 'https://placehold.co/100x100?text=用户'
      },
      content: '配乐和画面的结合堪称完美，多次泪目。',
      time: '2小时前',
      likes: 342
    }
  ],
  '2': [
    {
      id: 1,
      user: {
        name: '电影爱好者',
        avatar: 'https://placehold.co/100x100?text=用户'
      },
      content: '经典中的经典，希望与友谊的最佳诠释。',
      time: '30分钟前',
      likes: 892
    },
    {
      id: 2,
      user: {
        name: '书虫一枚',
        avatar: 'https://placehold.co/100x100?text=用户'
      },
      content: '比原著更加震撼，摩根·弗里曼的旁白太有魅力了。',
      time: '1小时前',
      likes: 567
    }
  ],
  '3': [
    {
      id: 1,
      user: {
        name: '烧脑影迷',
        avatar: 'https://placehold.co/100x100?text=用户'
      },
      content: '第一次看完全没看懂，刷了三遍才理清梦境层级！',
      time: '2小时前',
      likes: 432
    },
    {
      id: 2,
      user: {
        name: '诺兰粉',
        avatar: 'https://placehold.co/100x100?text=用户'
      },
      content: '旋转陀螺到底倒没倒？开放式结局太经典了。',
      time: '3小时前',
      likes: 321
    }
  ],
  '4': [
    {
      id: 1,
      user: {
        name: '感动常在',
        avatar: 'https://placehold.co/100x100?text=用户'
      },
      content: '每次看都会有新的感悟，生活就像一盒巧克力。',
      time: '45分钟前',
      likes: 678
    },
    {
      id: 2,
      user: {
        name: 'Tom迷',
        avatar: 'https://placehold.co/100x100?text=用户'
      },
      content: '汤姆·汉克斯的演技太出色了，把阿甘演活了。',
      time: '1小时前',
      likes: 456
    }
  ]
}

// 响应式数据
const videoDetail = ref({})
const videoError = ref(false)
const relatedVideos = ref([])
const comments = ref([])

// 根据视频ID加载对应内容
onMounted(() => {
  // 获取当前视频详情
  if (videoDatabase[videoId]) {
    videoDetail.value = { ...videoDatabase[videoId] }
  } else {
    // 如果找不到对应ID的视频，使用默认视频
    videoDetail.value = { ...videoDatabase['1'] }
  }
  
  // 加载对应视频的评论
  if (commentsDatabase[videoId]) {
    comments.value = [...commentsDatabase[videoId]]
  } else {
    comments.value = [...commentsDatabase['1']]
  }
  
  // 生成相关推荐（排除当前视频）
  // 使用内联SVG作为占位图，避免外部服务依赖
  relatedVideos.value = [
    {
      id: '1',
      title: '推荐电影：星际穿越',
      director: '诺兰',
      duration: '169分钟'
    },
    {
      id: '2',
      title: '推荐电影：肖申克的救赎',
      director: '德拉邦特',
      duration: '142分钟'
    },
    {
      id: '3',
      title: '推荐电影：盗梦空间',
      director: '诺兰',
      duration: '148分钟'
    }
  ].filter(video => video.id !== videoId)
})

// 状态变量
const isPlaying = ref(false)
const commentText = ref('')
const isLiked = ref(false)
const isSaved = ref(false)
const replyText = ref('')
const replyingTo = ref(null)
const isExpanded = ref(false)
const showExpandBtn = ref(false)

// AI弹幕检测相关状态变量
const danmuList = ref([]) // 弹幕列表
const danmuText = ref('') // 弹幕输入内容
const isAIDetectionEnabled = ref(true) // 是否启用AI检测
const showDanmuPanel = ref(true) // 是否显示弹幕面板
const isSendingDanmu = ref(false) // 是否正在发送弹幕

// AI电影推荐相关状态变量
const aiRecommendedMovies = ref([]) // AI推荐电影列表
const aiAnalysis = ref(null) // AI对当前电影的分析
const isLoadingRecommendations = ref(false) // 是否正在加载推荐
const searchQuery = ref('') // 搜索查询词
const searchResults = ref([]) // 搜索结果
const isSearching = ref(false) // 是否正在搜索

// 不再需要处理图片加载错误，因为我们将使用内联SVG

// AI违规弹幕检测功能
const detectInappropriateContent = (content) => {
  // 模拟AI检测逻辑
  const inappropriateWords = ['垃圾', '差劲', '无聊', '傻逼', '操你', '妈的', '智障', '脑残', '去死', '废物']
  // 转小写进行匹配
  const lowerContent = content.toLowerCase()
  return inappropriateWords.some(word => lowerContent.includes(word))
}

// 发送弹幕
const sendDanmu = async () => {
  if (!danmuText.value.trim() || isSendingDanmu.value) return
  
  isSendingDanmu.value = true
  
  try {
    // 检查是否启用AI检测
    if (isAIDetectionEnabled.value) {
      const isInappropriate = detectInappropriateContent(danmuText.value)
      if (isInappropriate) {
        alert('您的弹幕包含不当内容，已被AI检测系统拦截')
        danmuText.value = ''
        return
      }
    }
    
    // 创建新弹幕
    const newDanmu = {
      id: Date.now(),
      content: danmuText.value,
      color: getRandomColor(),
      position: Math.floor(Math.random() * 3) + 1, // 1: 顶部, 2: 中间, 3: 底部
      time: Date.now(),
      speed: Math.random() * 5 + 10 // 弹幕速度
    }
    
    danmuList.value.push(newDanmu)
    danmuText.value = ''
    
    // 10秒后移除弹幕
    setTimeout(() => {
      danmuList.value = danmuList.value.filter(d => d.id !== newDanmu.id)
    }, 10000)
  } catch (error) {
    console.error('发送弹幕失败:', error)
  } finally {
    isSendingDanmu.value = false
  }
}

// 获取随机颜色
const getRandomColor = () => {
  const colors = ['#ffffff', '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7', '#dda0dd', '#ff7675', '#74b9ff']
  return colors[Math.floor(Math.random() * colors.length)]
}

// 切换弹幕面板显示
const toggleDanmuPanel = () => {
  showDanmuPanel.value = !showDanmuPanel.value
}

// 切换AI检测功能
const toggleAIDetection = () => {
  isAIDetectionEnabled.value = !isAIDetectionEnabled.value
  if (isAIDetectionEnabled.value) {
    alert('AI违规内容检测功能已开启')
  } else {
    alert('警告：禁用AI检测可能会导致不当内容显示')
  }
}

// AI电影搜索功能
const searchMovies = async (query) => {
  if (!query.trim()) {
    searchResults.value = []
    return
  }
  
  isSearching.value = true
  try {
    // 模拟搜索延迟
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 搜索逻辑：基于标题、描述、标签等多维度匹配
    const queryLower = query.toLowerCase()
    const results = Object.values(videoDatabase)
      .filter(movie => 
        movie.title.toLowerCase().includes(queryLower) ||
        movie.description.toLowerCase().includes(queryLower) ||
        (movie.tags && movie.tags.some(tag => tag.toLowerCase().includes(queryLower))) ||
        movie.director.toLowerCase().includes(queryLower) ||
        (movie.actors && movie.actors.some(actor => actor.toLowerCase().includes(queryLower)))
      )
      .sort((a, b) => {
        // 基于匹配程度排序
        const aScore = calculateMatchScore(a, queryLower)
        const bScore = calculateMatchScore(b, queryLower)
        return bScore - aScore
      })
    
    searchResults.value = results
  } catch (error) {
    console.error('搜索失败:', error)
  } finally {
    isSearching.value = false
  }
}

// 计算搜索匹配分数
const calculateMatchScore = (movie, query) => {
  let score = 0
  
  // 标题匹配权重最高
  if (movie.title.toLowerCase().includes(query)) {
    score += 10
  }
  
  // 标签匹配权重较高
  if (movie.tags && movie.tags.some(tag => tag.toLowerCase().includes(query))) {
    score += 7
  }
  
  // 导演匹配权重适中
  if (movie.director.toLowerCase().includes(query)) {
    score += 5
  }
  
  // 主演匹配权重适中
  if (movie.actors && movie.actors.some(actor => actor.toLowerCase().includes(query))) {
    score += 5
  }
  
  // 描述匹配权重较低
  if (movie.description.toLowerCase().includes(query)) {
    score += 3
  }
  
  return score
}

// AI电影推荐功能
const generateAIRecommendations = async () => {
  isLoadingRecommendations.value = true
  try {
    // 模拟AI处理延迟
    await new Promise(resolve => setTimeout(resolve, 800))
    
    const allMovies = Object.values(videoDatabase)
    const currentMovie = videoDetail.value
    
    // 生成AI分析
    aiAnalysis.value = {
      genreMatch: `${Math.floor(Math.random() * 20) + 80}%`,
      moodMatch: `${Math.floor(Math.random() * 15) + 75}%`,
      styleSimilarity: `${Math.floor(Math.random() * 30) + 60}%`,
      confidence: `${Math.floor(Math.random() * 10) + 90}%`,
      analysis: `基于您正在观看的《${currentMovie.title}》，AI分析显示您可能喜欢${currentMovie.tags?.join('、') || '类似风格'}的电影。`
    }
    
    // 基于多维度相似度推荐
    const recommended = allMovies
      .filter(movie => movie.id !== currentMovie.id)
      .map(movie => {
        // 计算综合相似度
        const similarity = calculateMovieSimilarity(currentMovie, movie)
        return { ...movie, similarity }
      })
      .sort((a, b) => b.similarity - a.similarity)
      .slice(0, 3) // 取前3个推荐
    
    aiRecommendedMovies.value = recommended
  } catch (error) {
    console.error('生成推荐失败:', error)
  } finally {
    isLoadingRecommendations.value = false
  }
}

// 计算电影相似度
const calculateMovieSimilarity = (movieA, movieB) => {
  let similarity = 0
  const totalFactors = 4 // 总共有4个因素
  
  // 1. 标签相似度 (权重 0.4)
  if (movieA.tags && movieB.tags) {
    const commonTags = movieA.tags.filter(tag => movieB.tags.includes(tag))
    const tagSimilarity = commonTags.length / Math.max(movieA.tags.length, movieB.tags.length)
    similarity += tagSimilarity * 0.4
  }
  
  // 2. 导演相似度 (权重 0.2)
  if (movieA.director === movieB.director) {
    similarity += 0.2
  }
  
  // 3. 评分相似度 (权重 0.2)
  const ratingA = parseFloat(movieA.rating) || 0
  const ratingB = parseFloat(movieB.rating) || 0
  const ratingDiff = Math.abs(ratingA - ratingB)
  const ratingSimilarity = Math.max(0, 1 - ratingDiff / 10)
  similarity += ratingSimilarity * 0.2
  
  // 4. 描述文本相似度 (简单实现) (权重 0.2)
  const descWordsA = new Set(movieA.description.toLowerCase().split(/\s+/))
  const descWordsB = new Set(movieB.description.toLowerCase().split(/\s+/))
  const commonWords = [...descWordsA].filter(word => descWordsB.has(word))
  const totalUniqueWords = new Set([...descWordsA, ...descWordsB]).size
  const textSimilarity = totalUniqueWords > 0 ? commonWords.length / totalUniqueWords : 0
  similarity += textSimilarity * 0.2
  
  return Math.round(similarity * 100)
}

// 组件挂载时生成AI推荐
onMounted(() => {
  generateAIRecommendations()
})

// 格式化播放量
const formattedViews = computed(() => {
  const views = parseInt(videoDetail.value.views) || 0
  if (views >= 10000) {
    return (views / 10000).toFixed(1) + '万'
  }
  return views.toString()
})

// 播放/暂停功能
const togglePlay = () => {
  const video = document.getElementById('videoPlayer')
  if (video) {
    if (video.paused) {
      video.play()
      isPlaying.value = true
    } else {
      video.pause()
      isPlaying.value = false
    }
  }
}

// 点赞功能
const toggleLike = () => {
  isLiked.value = !isLiked.value
  if (isLiked.value) {
    videoDetail.value.likes = (parseInt(videoDetail.value.likes) || 0) + 1
  } else {
    videoDetail.value.likes = Math.max(0, (parseInt(videoDetail.value.likes) || 0) - 1)
  }
}

// 收藏功能
const toggleSave = () => {
  isSaved.value = !isSaved.value
  // 这里可以添加实际的收藏逻辑
}

// 分享功能
const shareVideo = () => {
  // 简单的分享逻辑，实际项目中可以使用Web Share API
  if (navigator.share) {
    navigator.share({
      title: videoDetail.value.title,
      text: videoDetail.value.description,
      url: window.location.href
    }).catch(err => {
      console.log('分享失败:', err)
    })
  } else {
    // 复制链接到剪贴板
    navigator.clipboard.writeText(window.location.href)
      .then(() => alert('链接已复制到剪贴板'))
      .catch(err => console.log('复制失败:', err))
  }
}

// 提交评论
const submitComment = () => {
  if (commentText.value.trim()) {
    comments.value.unshift({
      id: Date.now(), // 使用时间戳作为唯一ID
      user: {
        name: '当前用户',
        avatar: 'https://placehold.co/100x100?text=我'
      },
      content: commentText.value,
      time: '刚刚',
      likes: 0,
      replies: []
    })
    commentText.value = ''
    // 重置文本框高度
    const textarea = document.querySelector('.comment-textarea')
    if (textarea) {
      textarea.style.height = 'auto'
    }
  }
}

// 评论点赞
const likeComment = (comment) => {
  comment.likes += 1
}

// 回复评论
const replyToComment = (comment) => {
  replyingTo.value = replyingTo.value === comment.id ? null : comment.id
  if (replyingTo.value === comment.id) {
    replyText.value = ''
    // 滚动到回复框
    setTimeout(() => {
      const replyBox = document.querySelector(`[data-comment-id="${comment.id}"]`)
      if (replyBox) {
        replyBox.scrollIntoView({ behavior: 'smooth', block: 'center' })
        replyBox.querySelector('.reply-textarea')?.focus()
      }
    }, 100)
  }
}

// 取消回复
const cancelReply = () => {
  replyingTo.value = null
  replyText.value = ''
}

// 提交回复
const submitReply = (comment) => {
  if (replyText.value.trim()) {
    // 如果评论没有replies数组，创建一个
    if (!comment.replies) {
      comment.replies = []
    }
    
    comment.replies.push({
      id: Date.now(),
      user: {
        name: '当前用户',
        avatar: 'https://placehold.co/100x100?text=我'
      },
      content: replyText.value,
      time: '刚刚',
      likes: 0
    })
    
    replyText.value = ''
    replyingTo.value = null
  }
}

// 展开/收起描述
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}

// 调整文本框高度
const adjustTextareaHeight = (event) => {
  const textarea = event.target
  textarea.style.height = 'auto'
  textarea.style.height = (textarea.scrollHeight) + 'px'
  // 限制最大高度
  if (textarea.scrollHeight > 200) {
    textarea.style.height = '200px'
    textarea.style.overflowY = 'auto'
  } else {
    textarea.style.overflowY = 'hidden'
  }
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  const now = new Date()
  const diffTime = Math.abs(now - date)
  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
  
  if (diffDays === 0) {
    return '今天'
  } else if (diffDays === 1) {
    return '昨天'
  } else if (diffDays < 7) {
    return `${diffDays}天前`
  } else if (diffDays < 30) {
    return `${Math.floor(diffDays / 7)}周前`
  } else if (diffDays < 365) {
    return `${Math.floor(diffDays / 30)}个月前`
  } else {
    return `${Math.floor(diffDays / 365)}年前`
  }
}

// 检查是否需要显示展开按钮
const checkDescriptionLength = () => {
  const description = videoDetail.value.description || ''
  showExpandBtn.value = description.length > 150
}

// 跳转到其他视频
const goToVideo = (id) => {
  router.push(`/video/${id}`)
}

// 监听视频详情变化，检查描述长度
watch(() => videoDetail.value.description, () => {
  checkDescriptionLength()
})

// 组件挂载时检查描述长度
onMounted(() => {
  // 原有逻辑保持不变...
  
  // 新增：检查描述是否需要展开按钮
  checkDescriptionLength()
})
</script>

<template>
  <div class="video-detail-container">
    <!-- 视频播放器区域 - 增强版 -->
    <div class="video-player-section">
      <div class="player-wrapper">
          <video 
            v-if="videoDetail.videoUrl"
            id="videoPlayer" 
            :src="videoDetail.videoUrl" 
            controls 
            @click="togglePlay"
            @error="videoError = true"
            class="video-player"
            preload="metadata"
          >
            您的浏览器不支持视频播放
          </video>
          <div v-else class="video-placeholder">
            <div class="loading-spinner"></div>
            <p>视频加载中...</p>
          </div>
          <div v-if="videoError" class="video-error">
            <div class="error-content">
              <div class="error-icon">⚠️</div>
              <h3>视频加载失败</h3>
              <p>无法加载视频，请稍后再试</p>
              <button @click="window.location.reload()" class="retry-button">重试</button>
            </div>
          </div>
          
          <!-- 弹幕显示区域 -->
          <div class="danmu-container">
            <div 
              v-for="danmu in danmuList" 
              :key="danmu.id"
              class="danmu-item"
              :class="`position-${danmu.position}`"
              :style="{
                color: danmu.color,
                animationDuration: `${danmu.speed}s`
              }"
            >
              {{ danmu.content }}
            </div>
          </div>
          
          <!-- 播放统计信息浮层 -->
          <div class="video-stats-overlay">
            <span class="stat-item"><i class="view-icon"></i> {{ formattedViews }}</span>
            <span class="stat-item"><i class="like-icon"></i> {{ videoDetail.likes || 0 }}</span>
            <button class="danmu-toggle-btn" @click="toggleDanmuPanel" :class="{active: showDanmuPanel}">
              <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                <circle cx="8" cy="8" r="6" fill="currentColor" opacity="0.8"/>
                <path d="M6 6v4M10 6v4M8 5v6" stroke="white" stroke-width="2" stroke-linecap="round"/>
              </svg>
              弹幕
            </button>
          </div>
        </div>
        
        <!-- 弹幕控制面板 -->
        <div v-if="showDanmuPanel" class="danmu-control-panel">
          <div class="danmu-input-wrapper">
            <input 
              v-model="danmuText"
              type="text"
              placeholder="发送弹幕..."
              class="danmu-input"
              @keyup.enter="sendDanmu"
              :disabled="isSendingDanmu"
              maxlength="50"
            />
            <button 
              @click="sendDanmu" 
              class="send-danmu-btn"
              :disabled="!danmuText.trim() || isSendingDanmu"
            >
              {{ isSendingDanmu ? '发送中...' : '发送' }}
            </button>
          </div>
          
          <div class="danmu-settings">
            <label class="ai-detection-toggle">
              <input 
                type="checkbox" 
                v-model="isAIDetectionEnabled"
                @change="toggleAIDetection"
              />
              <span class="toggle-slider"></span>
              <span class="toggle-label">启用AI违规内容检测</span>
            </label>
            <div class="danmu-stats">
              <span class="danmu-count">{{ danmuList.length }} 条弹幕</span>
              <span class="ai-status" :class="{enabled: isAIDetectionEnabled}">
                AI检测: {{ isAIDetectionEnabled ? '开启' : '关闭' }}
              </span>
            </div>
          </div>
        </div>
    </div>

    <div class="content-grid">
      <div class="main-content">
        <!-- 视频信息区域 - 增强版 -->
        <div class="video-info-section">
          <div class="title-row">
            <h1 class="video-title">{{ videoDetail.title }}</h1>
            <div class="action-buttons">
              <button class="action-btn like-btn" :class="{liked: isLiked}" @click="toggleLike">
                <i class="like-icon"></i> {{ isLiked ? '已赞' : '点赞' }}
              </button>
              <button class="action-btn share-btn" @click="shareVideo">
                <i class="share-icon"></i> 分享
              </button>
              <button class="action-btn save-btn" :class="{saved: isSaved}" @click="toggleSave">
                <i class="save-icon"></i> {{ isSaved ? '已收藏' : '收藏' }}
              </button>
            </div>
          </div>
          
          <div class="video-meta">
            <span class="rating">{{ videoDetail.rating || '-' }}</span>
            <span class="views">{{ formattedViews }}次观看</span>
            <span class="duration">{{ videoDetail.duration || '-' }}</span>
            <span class="date">{{ formatDate(videoDetail.releaseDate) }}</span>
          </div>

          <div class="video-description expandable-text">
            <p>{{ videoDetail.description || '暂无描述' }}</p>
            <button v-if="showExpandBtn" class="expand-btn" @click="toggleExpand">{{ isExpanded ? '收起' : '展开' }}</button>
          </div>

          <div class="video-details-row">
            <div class="video-crew">
              <p><strong>导演：</strong>{{ videoDetail.director || '-' }}</p>
              <p><strong>主演：</strong>{{ videoDetail.actors && Array.isArray(videoDetail.actors) ? videoDetail.actors.join('、') : '-' }}</p>
            </div>

            <div class="video-tags">
              <span v-for="tag in (videoDetail.tags || [])" :key="tag" class="tag">{{ tag }}</span>
            </div>
          </div>
          
          <!-- AI分析区域 -->
          <div class="ai-analysis-section">
            <div class="ai-analysis-header">
              <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <circle cx="12" cy="12" r="10" fill="#007bff" opacity="0.1"/>
                <path d="M12 8v4M12 16h0" stroke="#007bff" stroke-width="2" stroke-linecap="round"/>
                <path d="M8 12l8 0" stroke="#007bff" stroke-width="2" stroke-linecap="round"/>
              </svg>
              <h3>AI智能分析</h3>
            </div>
            <p class="ai-analysis-text">{{ aiAnalysis?.analysis || 'AI正在分析当前电影...' }}</p>
            <div class="ai-stats">
              <div class="ai-stat">
                <span class="stat-label">风格匹配度</span>
                <span class="stat-value">{{ aiAnalysis?.genreMatch || '--' }}</span>
              </div>
              <div class="ai-stat">
                <span class="stat-label">情感匹配度</span>
                <span class="stat-value">{{ aiAnalysis?.moodMatch || '--' }}</span>
              </div>
              <div class="ai-stat">
                <span class="stat-label">推荐置信度</span>
                <span class="stat-value">{{ aiAnalysis?.confidence || '--' }}</span>
              </div>
            </div>
          </div>
          
          <!-- AI搜索区域 -->
          <div class="ai-search-section">
            <div class="ai-search-header">
              <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 17a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" fill="#007bff" opacity="0.1"/>
                <path d="M12.5 12.5l4 4" stroke="#007bff" stroke-width="2" stroke-linecap="round"/>
              </svg>
              <h3>AI智能搜索</h3>
            </div>
            <div class="search-input-wrapper">
              <input 
                v-model="searchQuery"
                type="text"
                placeholder="搜索电影、导演、演员或标签..."
                class="ai-search-input"
                @input="searchMovies(searchQuery)"
                @keyup.enter="searchMovies(searchQuery)"
              />
              <button 
                @click="searchMovies(searchQuery)"
                class="search-btn"
                :disabled="isSearching"
              >
                {{ isSearching ? '搜索中...' : '搜索' }}
              </button>
            </div>
            
            <!-- 搜索结果 -->
            <div v-if="searchResults.length > 0" class="search-results">
              <h4>搜索结果 ({{ searchResults.length }})</h4>
              <div class="search-results-list">
                <div 
                  v-for="result in searchResults" 
                  :key="result.id"
                  class="search-result-item"
                  @click="goToVideo(result.id)"
                >
                  <div class="search-result-info">
                    <h5 class="search-result-title">{{ result.title }}</h5>
                    <p class="search-result-director">导演：{{ result.director }}</p>
                    <div class="search-result-tags">
                      <span v-for="tag in (result.tags || [])" :key="tag" class="tag">{{ tag }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 评论区域 - 增强版 -->
        <div class="comments-section">
          <h3 class="section-title">{{ comments.length }} 条评论</h3>
          
          <div class="comment-input-wrapper">
            <div class="user-avatar-small">
              <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                <circle cx="20" cy="20" r="18" fill="#007bff"/>
                <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="16" font-weight="bold" text-anchor="middle" dominant-baseline="middle" fill="white">我</text>
              </svg>
            </div>
            <div class="comment-input-container">
              <textarea 
                v-model="commentText" 
                placeholder="写下你的评论..."
                rows="3"
                class="comment-textarea"
                @input="adjustTextareaHeight"
              ></textarea>
              <div class="comment-input-footer">
                <button 
                  @click="submitComment" 
                  class="submit-comment"
                  :disabled="!commentText.trim()"
                >
                  发表评论
                </button>
              </div>
            </div>
          </div>

          <div class="comment-list">
            <div v-for="comment in comments" :key="comment.id" class="comment-item">
              <img :src="comment.user.avatar" :alt="comment.user.name" class="user-avatar">
              <div class="comment-content">
                <div class="comment-header">
                  <span class="user-name">{{ comment.user.name }}</span>
                  <span class="comment-time">{{ comment.time }}</span>
                </div>
                <p class="comment-text">{{ comment.content }}</p>
                <div class="comment-actions">
                  <button class="like-btn" @click="likeComment(comment)">
                    <i class="like-icon"></i> <span>{{ comment.likes }}</span>
                  </button>
                  <button class="reply-btn" @click="replyToComment(comment)">
                    <i class="reply-icon"></i> 回复
                  </button>
                </div>
                <!-- 回复输入框 -->
                <div v-if="replyingTo === comment.id" class="reply-input-wrapper">
                  <textarea 
                    v-model="replyText"
                    placeholder="回复 @{{ comment.user.name }}..."
                    rows="2"
                    class="reply-textarea"
                  ></textarea>
                  <div class="reply-actions">
                    <button @click="cancelReply" class="cancel-btn">取消</button>
                    <button @click="submitReply(comment)" class="submit-reply" :disabled="!replyText.trim()">回复</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 侧边栏相关推荐区域 - 增强版 -->
      <div class="sidebar">
        <div class="related-videos-section">
          <h3 class="section-title">相关推荐</h3>
          <div class="related-list">
            <div 
              v-for="video in relatedVideos" 
              :key="video.id"
              class="related-video-item"
              @click="goToVideo(video.id)"
            >
              <!-- 使用增强的内联SVG作为占位图 -->
              <div class="thumbnail-container">
                <img 
                  :src="video.thumbnail || `https://picsum.photos/130/85?random=${video.id}`" 
                  :alt="video.title"
                  class="video-thumbnail"
                  loading="lazy"
                  @error="handleImageError($event)"
                />
                <div class="duration-badge">{{ video.duration }}</div>
              </div>
              <div class="related-info">
                <h4 class="related-title">{{ video.title }}</h4>
                <p class="related-director">{{ video.director }}</p>
                <p class="related-stats">{{ Math.floor(Math.random() * 10000) + 1000 }}次观看</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- AI推荐区域 -->
        <div class="ai-recommendations-section">
          <div class="section-title">
            <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 16a7 7 0 1 0 0-14 7 7 0 0 0 0 14z" fill="#007bff" opacity="0.2"/>
              <path d="M7 7l4 0M9 5l0 4" stroke="#007bff" stroke-width="2" stroke-linecap="round"/>
            </svg>
            AI智能推荐
          </div>
          
          <div v-if="isLoadingRecommendations" class="recommendations-loading">
            <div class="loading-spinner small"></div>
            <p>AI正在为您推荐电影...</p>
          </div>
          
          <div v-else class="ai-recommendations-list">
            <div 
              v-for="movie in aiRecommendedMovies" 
              :key="movie.id"
              class="ai-recommendation-item"
              @click="goToVideo(movie.id)"
            >
              <!-- 使用增强的内联SVG作为占位图 -->
              <div class="thumbnail-container small">
                <img 
                  :src="movie.thumbnail || `https://picsum.photos/100/60?random=${movie.id}`" 
                  :alt="movie.title"
                  class="video-thumbnail"
                  loading="lazy"
                  @error="handleImageError($event)"
                />
              </div>
              <div class="ai-rec-info">
                <h4 class="ai-rec-title">{{ movie.title }}</h4>
                <p class="ai-rec-director">导演：{{ movie.director }}</p>
                <div class="ai-rec-video-tags">
                  <span v-for="tag in (movie.tags || [])" :key="tag" class="tag">{{ tag }}</span>
                </div>
                <span class="ai-rec-similarity">匹配度: {{ movie.similarity }}%</span>
              </div>
            </div>
            
            <div v-if="aiRecommendedMovies.length === 0" class="no-recommendations">
              <p>暂无推荐内容</p>
            </div>
          </div>
        </div>
        
        <!-- 添加视频统计卡片 -->
        <div class="stats-card">
          <h4 class="stats-title">视频统计</h4>
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-value">{{ formattedViews }}</div>
              <div class="stat-label">观看次数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ (videoDetail.likes / 10000).toFixed(1) }}万</div>
              <div class="stat-label">点赞数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ comments.length }}</div>
              <div class="stat-label">评论数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ videoDetail.rating || '-' }}</div>
              <div class="stat-label">评分</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 弹幕相关样式 */
.danmu-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}

.danmu-item {
  position: absolute;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  animation-name: danmuMove;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.danmu-item.position-1 {
  top: 10%;
}

.danmu-item.position-2 {
  top: 40%;
}

.danmu-item.position-3 {
  top: 70%;
}

@keyframes danmuMove {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

/* 弹幕控制面板 */
.danmu-control-panel {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  padding: 15px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.danmu-input-wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.danmu-input {
  flex: 1;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  color: white;
  font-size: 14px;
  transition: all 0.3s ease;
}

.danmu-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.15);
  border-color: #007bff;
}

.send-danmu-btn {
  padding: 8px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.send-danmu-btn:hover:not(:disabled) {
  background: #0056b3;
  transform: translateY(-1px);
}

.send-danmu-btn:disabled {
  background: #4a5568;
  cursor: not-allowed;
}

/* AI检测开关 */
.ai-detection-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.ai-detection-toggle input {
  display: none;
}

.toggle-slider {
  position: relative;
  width: 40px;
  height: 20px;
  background: #4a5568;
  border-radius: 20px;
  transition: background 0.3s ease;
}

.toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.ai-detection-toggle input:checked + .toggle-slider {
  background: #007bff;
}

.ai-detection-toggle input:checked + .toggle-slider::after {
  transform: translateX(20px);
}

.toggle-label {
  color: white;
  font-size: 14px;
}

.danmu-settings {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.danmu-stats {
  display: flex;
  gap: 15px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.ai-status.enabled {
  color: #4CAF50;
}

/* 弹幕开关按钮 */
.danmu-toggle-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  border-radius: 15px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.danmu-toggle-btn:hover,
.danmu-toggle-btn.active {
  background: rgba(255, 255, 255, 0.2);
}

.danmu-toggle-btn.active {
  background: #007bff;
}

/* AI分析区域样式 */
.ai-analysis-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border-left: 4px solid #007bff;
}

.ai-analysis-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.ai-analysis-header h3 {
  margin: 0;
  color: #007bff;
  font-size: 18px;
  font-weight: 600;
}

.ai-analysis-text {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 15px;
  line-height: 1.6;
}

.ai-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.ai-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-stat .stat-label {
  font-size: 13px;
  color: #666;
}

.ai-stat .stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #007bff;
}

/* AI搜索区域样式 */
.ai-search-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.ai-search-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.ai-search-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.search-input-wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.ai-search-input {
  flex: 1;
  padding: 10px 15px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.ai-search-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.search-btn {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-btn:hover:not(:disabled) {
  background: #0056b3;
  transform: translateY(-1px);
}

.search-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

/* 搜索结果样式 */
.search-results {
  margin-top: 15px;
}

.search-results h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-result-item {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.search-result-item:hover {
  background: #e9ecef;
  border-left-color: #007bff;
  transform: translateX(3px);
}

.search-result-title {
  margin: 0 0 5px 0;
  color: #333;
  font-size: 15px;
  font-weight: 600;
}

.search-result-director {
  margin: 0 0 8px 0;
  color: #666;
  font-size: 13px;
}

.search-result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.search-result-tags .tag {
  padding: 2px 8px;
  background: #e7f3ff;
  color: #007bff;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

/* AI推荐区域样式 */
.ai-recommendations-section {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.ai-recommendations-section .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 15px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.recommendations-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  color: #666;
}

.loading-spinner.small {
  width: 30px;
  height: 30px;
  border-width: 3px;
  margin-bottom: 10px;
}

.ai-recommendations-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ai-recommendation-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.ai-recommendation-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.thumbnail-container.small {
  width: 100px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.ai-rec-info {
  flex: 1;
  min-width: 0;
}

.ai-rec-title {
  margin: 0 0 5px 0;
  color: #333;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-rec-director {
  margin: 0 0 8px 0;
  color: #666;
  font-size: 12px;
}

.ai-rec-video-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 5px;
}

.ai-rec-video-tags .tag {
  padding: 2px 8px;
  background: #e7f3ff;
  color: #007bff;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.ai-rec-similarity {
  display: inline-block;
  padding: 3px 8px;
  background: #d4edda;
  color: #155724;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.no-recommendations {
  text-align: center;
  padding: 30px;
  color: #666;
}

/* 全局容器样式 - 现代化设计 */
.video-detail-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 内容网格布局 */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 50px;
}

.main-content {
  min-width: 0;
}

.sidebar {
  position: sticky;
  top: 20px;
  align-self: start;
  height: fit-content;
}

/* 视频播放器区域 - 增强版 */
.video-player-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  position: relative;
  width: 100%;
  border-bottom: 4px solid #007bff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.player-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.video-player {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  transition: all 0.3s ease;
}

.video-player:hover {
  filter: brightness(1.05);
}

.video-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  gap: 20px;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.video-error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.error-content {
  text-align: center;
  padding: 40px;
  max-width: 400px;
}

.error-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.error-content h3 {
  margin-bottom: 15px;
  color: #ff6b6b;
  font-size: 24px;
}

.error-content p {
  color: #ccc;
  font-size: 16px;
  margin-bottom: 20px;
}

.retry-button {
  background: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.retry-button:hover {
  background: #0056b3;
  transform: translateY(-2px);
}

/* 播放统计信息浮层 */
.video-stats-overlay {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  gap: 20px;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px 20px;
  border-radius: 25px;
  backdrop-filter: blur(10px);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.view-icon, .like-icon, .share-icon, .save-icon, .reply-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.view-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}

.like-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}

.share-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E");
}

.save-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}

.reply-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E");
}

/* 视频信息区域 - 增强版 */
.video-info-section {
  background: white;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  margin-bottom: 30px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.video-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  color: #1a1a1a;
  letter-spacing: -0.5px;
  flex: 1;
  min-width: 0;
}

.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 25px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
  justify-content: center;
}

.like-btn {
  background: #f8f9fa;
  color: #666;
}

.like-btn:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

.like-btn.liked {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
  color: white;
}

.like-btn.liked .like-icon {
  filter: brightness(0) invert(1);
}

.share-btn {
  background: #f8f9fa;
  color: #666;
}

.share-btn:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

.save-btn {
  background: #f8f9fa;
  color: #666;
}

.save-btn:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

.save-btn.saved {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
}

.save-btn.saved .save-icon {
  filter: brightness(0) invert(1);
}

.video-meta {
  display: flex;
  gap: 25px;
  color: #666;
  margin-bottom: 25px;
  font-size: 15px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
  flex-wrap: wrap;
}

.video-meta .rating {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%);
  color: white;
  padding: 6px 16px;
  border-radius: 25px;
  font-weight: bold;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.video-description {
  line-height: 1.7;
  margin-bottom: 25px;
  color: #444;
  font-size: 16px;
  position: relative;
  max-height: 120px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.video-description.expanded {
  max-height: 1000px;
}

.video-description.expanded .expand-btn::before {
  content: '收起';
}

.expand-btn {
  background: none;
  border: none;
  color: #007bff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  padding: 0;
  position: relative;
}

.expand-btn:hover {
  text-decoration: underline;
}

.video-details-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: start;
}

.video-crew {
  min-width: 250px;
}

.video-crew p {
  margin: 12px 0;
  font-size: 16px;
  font-weight: 500;
}

.video-crew strong {
  color: #007bff;
  font-weight: 700;
}

.video-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tag {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
  cursor: pointer;
}

.tag:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 16px rgba(0, 123, 255, 0.3);
}

/* 评论区域 - 增强版 */
.comments-section {
  background: white;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 24px;
  margin-bottom: 30px;
  font-weight: 700;
  color: #1a1a1a;
  padding-bottom: 15px;
  border-bottom: 2px solid #007bff;
  display: inline-block;
}

.comment-input-wrapper {
  display: flex;
  gap: 15px;
  margin-bottom: 35px;
}

.user-avatar-small {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}

.comment-input-container {
  flex: 1;
  min-width: 0;
}

.comment-textarea {
  width: 100%;
  padding: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  resize: none;
  font-size: 16px;
  transition: all 0.3s ease;
  min-height: 100px;
  font-family: inherit;
  background: #fafafa;
}

.comment-textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
  background: white;
}

.comment-input-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.submit-comment {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

.submit-comment:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 123, 255, 0.3);
}

.submit-comment:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.comment-item {
  display: flex;
  gap: 16px;
  padding: 24px;
  background: #fafafa;
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
}

.comment-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  background: white;
}

.user-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comment-content {
  flex: 1;
  min-width: 0;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}

.user-name {
  font-weight: 700;
  font-size: 16px;
  color: #007bff;
}

.comment-time {
  color: #999;
  font-size: 13px;
  white-space: nowrap;
}

.comment-text {
  line-height: 1.7;
  margin-bottom: 16px;
  word-break: break-word;
  font-size: 16px;
  color: #333;
}

.comment-actions {
  display: flex;
  gap: 20px;
  align-items: center;
}

.comment-actions .like-btn,
.comment-actions .reply-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 6px 12px;
  border-radius: 20px;
}

.comment-actions .like-btn:hover,
.comment-actions .reply-btn:hover {
  background: rgba(0, 123, 255, 0.1);
  color: #007bff;
}

.comment-actions .like-btn.liked {
  color: #ff6b6b;
}

.reply-input-wrapper {
  margin-top: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 3px solid #007bff;
}

.reply-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  resize: none;
  font-size: 14px;
  margin-bottom: 12px;
  font-family: inherit;
}

.reply-textarea:focus {
  outline: none;
  border-color: #007bff;
}

.reply-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.cancel-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn:hover {
  background: #f8f9fa;
}

.submit-reply {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.submit-reply:hover:not(:disabled) {
  background: #0056b3;
}

.submit-reply:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 侧边栏相关推荐 - 增强版 */
.related-videos-section {
  background: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  margin-bottom: 24px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.related-video-item {
  display: flex;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 12px;
  border-radius: 12px;
  background: #f8f9fa;
  border: 2px solid transparent;
}

.related-video-item:hover {
  transform: translateX(8px);
  background: white;
  border-color: #007bff;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1);
}

.thumbnail-container {
  width: 130px;
  height: 85px;
  flex-shrink: 0;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.duration-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.related-info {
  flex: 1;
  min-width: 0;
}

.related-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1a1a1a;
}

.related-director {
  font-size: 13px;
  color: #666;
  margin-bottom: 3px;
  font-weight: 500;
}

.related-stats {
  font-size: 12px;
  color: #999;
}

/* 视频统计卡片 */
.stats-card {
  background: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.stats-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stats-grid .stat-item {
  text-align: center;
  padding: 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.stats-grid .stat-item:hover {
  transform: translateY(-3px);
}

.stat-value {
  font-size: 24px;
  font-weight: 800;
  color: #007bff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

/* 响应式设计 - 增强版 */
@media (max-width: 1200px) {
  .content-grid {
    gap: 25px;
    padding: 0 15px 40px;
  }
  
  .sidebar {
    width: 320px;
  }
  
  .video-title {
    font-size: 28px;
  }
  
  .action-buttons {
    gap: 8px;
  }
  
  .action-btn {
    padding: 10px 16px;
    font-size: 14px;
    min-width: 80px;
  }
}

@media (max-width: 1024px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    width: 100%;
    position: static;
  }
  
  .related-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
  }
  
  .related-video-item {
    width: 100%;
  }
  
  .video-info-section,
  .comments-section {
    padding: 24px;
  }
  
  .video-title {
    font-size: 26px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .content-grid {
    padding: 0 10px 30px;
    gap: 20px;
  }
  
  .video-player-section {
    margin-bottom: 20px;
  }
  
  .player-wrapper {
    aspect-ratio: 16/9;
  }
  
  .video-title {
    font-size: 24px;
  }
  
  .title-row {
    flex-direction: column;
    gap: 16px;
  }
  
  .action-buttons {
    width: 100%;
    justify-content: center;
  }
  
  .video-meta {
    flex-wrap: wrap;
    gap: 15px;
    font-size: 14px;
  }
  
  .video-meta .rating {
    font-size: 16px;
    padding: 4px 12px;
  }
  
  .video-details-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .video-info-section,
  .comments-section {
    padding: 20px;
    border-radius: 12px;
  }
  
  .comment-item {
    gap: 12px;
    padding: 20px;
  }
  
  .user-avatar {
    width: 48px;
    height: 48px;
  }
  
  .related-videos-section,
  .stats-card {
    padding: 20px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .video-stats-overlay {
    bottom: 10px;
    left: 10px;
    right: 10px;
    justify-content: center;
    gap: 15px;
  }
  
  .video-info-section,
  .comments-section {
    padding: 16px;
  }
  
  .video-title {
    font-size: 22px;
  }
  
  .video-meta {
    gap: 12px;
  }
  
  .video-meta .rating {
    font-size: 14px;
    padding: 3px 10px;
  }
  
  .tag {
    padding: 6px 16px;
    font-size: 13px;
  }
  
  .comment-textarea {
    padding: 12px;
    font-size: 14px;
  }
  
  .submit-comment {
    padding: 10px 20px;
    font-size: 14px;
  }
  
  .comment-item {
    padding: 16px;
    gap: 12px;
  }
  
  .user-avatar {
    width: 44px;
    height: 44px;
  }
  
  .user-name {
    font-size: 15px;
  }
  
  .comment-text {
    font-size: 14px;
  }
  
  .related-list {
    grid-template-columns: 1fr;
  }
  
  .thumbnail-container {
    width: 100px;
    height: 70px;
  }
  
  .related-title {
    font-size: 15px;
  }
  
  .stats-grid {
    gap: 12px;
  }
  
  .stats-grid .stat-item {
    padding: 12px;
  }
  
  .stat-value {
    font-size: 20px;
  }
}

  /* 视频缩略图样式 */
  .video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.2s ease;
  }
  
  .thumbnail-container:hover .video-thumbnail {
    transform: scale(1.05);
  }
  
  /* 图片错误状态样式 */
  .video-thumbnail.image-error {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px dashed #6c757d;
    object-fit: contain;
    padding: 10px;
  }
</style>